<template>
  <div class="my">
    <div class="head">
      <!-- 搜索 -->
      <van-search
        class="search_my"
        v-model="value"
        shape="round"
        placeholder="请输入搜索关键词"
      />
      <van-icon
        name="wap-nav"
        class="list"
        @click="toMore"
      />
    </div>
    <!-- 资料卡 -->
    <div class="person">
      <p class="img_box">
        <img
          src="../../public/headportrait.png"
          alt=""
        >
      </p>
      <p class="myname">陈困困._.</p>
      <ul class="p_list">
        <li
          v-for="item in lists"
          :key="item.id"
        ><span>{{item.name}}</span> <span class="content">{{item.count}}</span> </li>
      </ul>

    </div>
    <!-- 活动中心 -->
    <div class="center">
      <div class="c_content">
        <van-icon
          class="c_icon"
          name="bookmark-o"
        />
        <div class="c_txt">
          <p>活动中心</p>
          <p class="c_cont">开启签到的绿钻</p>
        </div>
      </div>
      <div class="c_content">
        <van-icon
          name="gem"
          class="c_icon"
        />
        <div class="c_txt">
          <p>会员中心</p>
          <p class="c_cont">买年卡送季卡啦</p>
        </div>
      </div>
    </div>

    <!-- 喜欢 -->
    <van-grid>
      <van-grid-item
        v-for="item in likes"
        :key="item.id"
        :icon="item.icon"
        :text="item.text"
      />
      <!-- <p class="num">{{num}}</p> -->
    </van-grid>

    <!-- 最近播放 -->
    <div class="recent">
      <p class="title">
        <span class="r_play">最近播放</span>
        <a href=""><span class="r_more">更多 ></span></a>
      </p>
      <div class="r_box">
        <img
          class="r_img"
          src="http://p.qpic.cn/music_cover/bglUEFSMMhA3eiblfHXvQROOLDVIEgUSJPP02mO7icuSqzQDkAjlUqPA/600?n=1"
          alt=""
        >
        <div class="r_txt">
          <van-icon
            name="audio"
            class="audio"
          />
          <span class="ybgq">已播歌曲</span>
        </div>
        <span class="play">
          <van-icon name="play" />
        </span>
        <span class="song">歌曲: 2首</span>
      </div>
    </div>

    <!-- 自建歌单 -->
    <div class="recent">
      <div>
        <p class="title">
          <span class="r_play">自建歌单</span>
          <a href=""><span class="r_more">更多 ></span></a>
        </p>
        <div class="r_box r_box1">
          <div class="r_cont">
            <img
              class="r_img"
              src="http://p.qpic.cn/music_cover/nvRBiaJHaPBvG00iczEYfbu21yuayrmrRtM8ZVxF3CTP6239VibmHsvog/600?n=1"
              alt=""
            >
            <van-icon
              name="play"
              class="play"
            />
            <span class="song">轻音乐</span>
          </div>
          <div class="newlist">
            <van-icon
              name="add-o"
              class="add-o"
            />
            <span class="new_txt">新建歌单</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 推荐歌单 -->
    <div class="recent">
      <p class="title">
        <span class="r_play">推荐歌单</span>
      </p>
      <div class="r_songlist">
        <div
          class="r_box r_box1"
          v-for="item in songlist"
          :key="item.dissid"
        >
          <div
            class="r_cont"
            @click="toSongList(item)"
            :dissid="dissid"
          >
            <img
              class="r_img"
              :src="item.imgurl"
              alt=""
              @click="getSongListDetail(item)"
            >
            <div class="play">
              <van-icon name="play" />
            </div>
            <span class="song">{{item.dissname}}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <p
      class="foot"
      @click="toRecommend"
    >发现更多推荐内容 ></p>
  </div>

</template>
<script>
export default {
  data: () => ({
    value: '',
    num: 0,
    lists: [
      {
        id: 0,
        name: '关注',
        count: 2
      },
      {
        id: 1,
        name: '粉丝',
        count: 0
      },
      {
        id: 2,
        name: '新歌提醒',
        count: '暂无更新'
      }
    ],
    likes: [
      {
        id: 0,
        icon: 'like',
        text: '喜欢'
      },
      {
        id: 1,
        icon: 'bag',
        text: '本地'
      },
      {
        id: 2,
        icon: 'column',
        text: '歌单'
      },
      {
        id: 3,
        icon: 'live',
        text: '电台'
      },
      {
        id: 4,
        icon: 'checked',
        text: '已购'
      }
    ],
    songlist: [],
    dissid: ''
  }),
  methods: {
    async getSongListDetail(item) {
      await this.$http.getSongListDetail(item)
    },
    async batchGetSongLists() {
      const res = await this.$http.batchGetSongLists(
        {
          limit: 10,
          page: 0,
          sortId: 5,
          categoryIds: [167]
        }
      )
      this.songlist = res.data.data[0].list
    },
    toRecommend() {
      this.$router.push({
        path: '/Recommend'
      })
    },
    toMore() {
      this.$router.push({
        path: '/more'
      })
      this.$router.go(0)
    },
    toSongList(item) {
      console.log(item)
      this.$router.push({
        name: 'songlist',
        query: {
          dissid: item.dissid
        }
      })
      // this.$router.go(0)
    }
  },
  created() {
    // this.getSongListDetail()
    this.batchGetSongLists()
  }
}
</script>
<style lang="scss">
.my {
  // height: 1000px;
  background-color: #eee;
  padding: 0 14px;
  margin-top: 44px;
  .head {
    display: flex;
    box-sizing: border-box;
    .list {
      font-size: 26px;
      color: #999797;
      text-align: center;
      line-height: 50px;
      background-color: #eee;
      margin-left: 10px;
    }
    .search_my {
      flex: 1;
    }
    .van-search__content--round {
      background-color: #ddd;
      .van-cell {
        font-size: 16px;
      }
    }
    .van-search {
      background-color: #eee;
      padding: 0;
    }
  }
  .person {
    background-color: #fff;
    height: 100px;
    margin-top: 16px;
    position: relative;
    border-radius: 10px;
    padding-top: 1px;
    .img_box {
      width: 60px;
      height: 60px;
      position: absolute;
      top: -30px;
      left: 20px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .myname {
      margin-left: 90px;
    }
    .p_list {
      display: flex;
      margin-top: 20px;
      li:nth-child(2) {
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        padding: 0 10px;
      }
      li {
        margin: 0 8px;
      }
      li:nth-child(1) {
        margin-left: 20px;
      }
      .content {
        color: #999797;
        font-size: 14px;
        margin-left: 4px;
      }
    }
  }
  .center {
    height: 80px;
    background-color: #fff;
    margin-top: 10px;
    border-radius: 10px;
    display: flex;
    padding: 10px 0;
    box-sizing: border-box;
    .c_content {
      display: flex;
      justify-content: space-evenly;
      width: 50%;
      .c_icon {
        font-size: 36px;
        color: #c0c0c0;
        line-height: 60px;
      }
      .c_txt {
        margin: 0;
        line-height: 8px;
        .c_cont {
          color: #999797;
          font-size: 14px;
        }
      }
    }
  }
  .van-grid {
    flex-wrap: nowrap;
    .van-grid-item {
      .van-grid-item__content {
        background-color: #eee;
        // padding: 0;
        .van-icon {
          color: #31c27c;
          font-size: 30px;
        }
        .van-grid-item__text {
          font-size: 16px;
          color: #000;
        }
      }
    }
  }
  .recent {
    .title {
      display: flex;
      justify-content: space-between;
      .r_more {
        color: #757575;
        font-size: 14px;
      }
      .r_play {
        font-size: 18px;
      }
    }
    .r_box {
      position: relative;
      .r_cont {
        margin-right: 10px;
      }
      .r_img {
        border-radius: 10px;
        width: 120px;
        height: 120px;
      }
      .r_txt {
        position: absolute;
        color: #fff;
        top: 32px;
        left: 36px;
        text-align: center;
        .audio {
          font-size: 24px;
          display: block;
        }
        .ybgq {
          font-size: 12px;
        }
      }
      .play {
        width: 40px;
        height: 30px;
        background-color: #c0c0c0;
        display: block;
        color: #fff;
        font-size: 20px;
        border-radius: 20px;
        text-align: center;
        position: absolute;
        top: 100px;
        line-height: 34px;
      }
      .song {
        display: block;
        margin-top: 12px;
        font-size: 12px;
      }
    }
  }
  .r_box1 {
    display: flex;
    .newlist {
      width: 120px;
      height: 120px;
      background-color: #f3f2f2;
      border-radius: 10px;
      margin-left: 10px;
      text-align: center;
      font-size: 12px;

      .new_txt {
        display: block;
        margin-top: 18px;
      }
      .add-o {
        font-size: 40px;
        line-height: 120px;
        color: #aaa;
      }
    }
  }
  .r_songlist {
    display: flex;
    overflow-x: auto;
  }
  .foot {
    text-align: center;
    font-size: 12px;
    color: #999797;
    line-height: 60px;
    margin-bottom: 50px;
  }
}
</style>
